<script setup>
  import { getDepartMentListApi } from '@/server/consult'
  import { ref } from 'vue'

  const props = defineProps(['type', 'illnessType'])

  // 获取科室列表
  const departmentList = ref([])
  const isDepartment = ref(false)
  // 二级科室列表
  const departmenttwoList = ref([])
  async function getDepartmentInfo() {
    const { data } = await getDepartMentListApi()
    departmentList.value = data.data
    isDepartment.value = true
  }
  getDepartmentInfo()

  // 选中的科室
  const activeIndex = ref(null)

  function activeClickfn(index) {
    activeIndex.value = index
    departmenttwoList.value = departmentList.value[index].child
  }
</script>

<template>
  <view class="department-page">
    <scroll-view scroll-y class="department-primary">
      <view
        v-if="isDepartment"
        class="department-item"
        v-for="(item, index) in departmentList"
        :class="{ active: index === activeIndex }"
        @click="activeClickfn(index)"
        >{{ item.name }}</view
      >
    </scroll-view>
    <scroll-view class="department-secondary">
      <navigator
        hover-class="none"
        :url="`/subpack_consult/description/description?type=${props.type}&illnessType=${props.illnessType}&depId=${item.id}`"
        class="department-item"
        v-for="(item, index) in departmenttwoList"
      >
        {{ item.name }}
      </navigator>
    </scroll-view>
  </view>
</template>

<style lang="scss">
  @import './index.scss';
</style>
